Core Web Vitals in 2026: What Really Affects Conversion and How to Fix It

01 In short: what you need to know

• Core Web Vitals (CWV) are three metrics of real user experience: loading (LCP), responsiveness (INP) and visual stability (CLS).
• "Good" thresholds: LCP up to 2.5 s, INP up to 200 ms, CLS up to 0.1. They are assessed at the 75th percentile of real visits, separately for mobile and desktop.
• INP replaced FID in March 2024. If your audit still mentions FID, it's outdated.
• A Lighthouse score is not CWV. Lighthouse is a lab test. Google evaluates field data (CrUX), meaning what real people experience.
• For SEO, CWV is one signal, not the main one. Relevance and content quality are stronger. For conversion, though, speed works directly.

02 What Core Web Vitals are

Core Web Vitals are a set of Google metrics describing how a user feels a page: when they see the content, how quickly the page responds, and whether the interface "jumps" under their finger.

A page "passes" CWV when all three metrics are in the green zone for 75% of real visits. Mobile and desktop data are counted separately, and mobile is usually what lets you down.

How INP differs from FID

FID measured only the delay of the first interaction. INP looks at all interactions during a visit and takes one of the slowest. That's why sites that passed FID often fail INP: menus, catalog filters, carts and forms require heavy JavaScript to run again and again.

03 Do Core Web Vitals affect SEO in 2026

Yes, but realistically.

• Google uses page experience as one of the signals in ranking. It works as a "tiebreaker": with equal relevance, faster pages win.
• Speed does not compensate for weak content. A page with perfect metrics that doesn't answer the query won't reach the top.
• A stronger indirect effect: slow page → user goes back to search → poor behavioral signals and fewer leads.
• On competitive queries, where several equally relevant sites sit at the top, CWV is often the small detail that decides.

Takeaway for business. Don't optimize for a "green badge". Optimize for the user: the SEO effect and conversion growth will come together.

04 How speed affects conversion

The link between speed and money is supported by large studies. For example, the joint Google and Deloitte study "Milliseconds Make Millions", based on data from dozens of brands, showed that improving mobile site speed by even a fraction of a second is associated with higher conversion in retail and travel.

What it looks like in practice:

1. Mobile traffic. A person on a phone with an unstable 4G connection won't wait. If the hero block appears after 5 seconds, some visitors will go to a competitor.
2. Forms and checkout. Poor INP means the "Order" button responds late; the user taps twice, gets a duplicate, or simply leaves.
3. Paid traffic. Every hryvnia of advertising that leads to a slow page pays back worse. Speed lowers cost per lead.
4. Trust. Layout shifts (CLS) that make you tap the wrong button destroy the feeling of reliability.

05 LCP: how to speed up your main content

LCP consists of four parts. Find which one is eating the time and treat that one.

What to do

1. Don't lazy-load the hero image. This is the most common mistake. Never use loading="lazy" for the LCP element; raise its priority instead:

<img
  src="/img/hero-1200.avif"
  srcset="/img/hero-640.avif 640w, /img/hero-1200.avif 1200w, /img/hero-1920.avif 1920w"
  sizes="100vw"
  width="1920" height="1080"
  fetchpriority="high"
  alt="Image description">

2. Modern formats and correct sizes. AVIF or WebP are usually 25–50% lighter than JPEG at comparable quality. Serve a mobile file to a mobile screen via srcset and sizes.

3. Remove render blocking. Inline the critical CSS for the first screen and load the rest asynchronously. Add scripts with defer.

4. Speed up the server. Target TTFB on cache: up to 600–800 ms on mobile. Full-page caching, a CDN, a current PHP version with OPcache and database query optimization all help.

5. Fonts. Include only the weights you need, in WOFF2, with font-display: swap and preload for the main font:

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

6. Preconnect to critical domains (CDN, fonts) saves time on DNS and TLS:

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

7. Server-rendered HTML. If the main content is drawn by client-side JavaScript, LCP will inevitably be late. For content pages, choose SSR, SSG or HTML streaming.

06 INP: how to make your site respond to clicks

Poor interactivity almost always means long tasks on the browser's main thread: while it's busy with JavaScript, it can't respond to a click.

Where poor INP comes from

• Many third-party scripts: chats, pixels, heatmaps, A/B tools.
• Heavy framework event handlers that re-render large parts of the page.
• Heavy computation in a click handler (catalog filtering, validation, price calculation).
• Too many DOM elements (thousands of nodes on a page).

What to do

1. Break up long tasks. Hand control back to the browser between chunks of work:

async function processItems(items) {
  for (const item of items) {
    handle(item);
    // yield the thread so the browser can respond to input
    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    } else {
      await new Promise((r) => setTimeout(r, 0));
    }
  }
}

2. Defer third-party widgets until interaction. Chat, pixels and A/B tools shouldn't load at startup. Load them after the first scroll, click, or via requestIdleCallback:

let loaded = false;
function loadChat() {
  if (loaded) return;
  loaded = true;
  const s = document.createElement('script');
  s.src = 'https://widget.example.com/chat.js';
  s.async = true;
  document.head.appendChild(s);
}
['scroll', 'pointerdown', 'keydown'].forEach((e) =>
  window.addEventListener(e, loadChat, { once: true, passive: true })
);

3. Instant visual feedback. After a click, show a loading state first (spinner, "pressed"), and do the heavy work later. INP measures time to the next frame, not to the completion of the operation.

4. Reduce the DOM. Virtualize long lists, don't render hidden blocks, simplify nesting.

5. Audit scripts. Remove unused libraries and tags. Every tag in GTM should have a clear business justification.

07 CLS: how to remove layout shifts

CLS occurs when elements appear or change size after the initial render and push the rest of the page around.

Fixes that cover most cases:

1. Always specify image and video dimensions: width and height attributes or CSS aspect-ratio.
2. Reserve space for dynamic blocks: banners, cookie notices, widgets, ads, embeds.
3. Set up fonts: font-display: swap plus a fallback with adjusted metrics (size-adjust, ascent-override) so the font swap doesn't change line height.
4. Don't insert content above what's already shown. Add new blocks below or into pre-reserved space.
5. Animate only transform and opacity, not top, height, margin.

.hero-img { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; } /* doesn't push content */
.ad-slot { min-height: 250px; }

08 How to measure Core Web Vitals correctly

There are two types of data, and they shouldn't be mixed.

A practical workflow:

1. In Search Console, find the URL groups with problems.
2. In PageSpeed Insights, review the field data for a specific page.
3. In Chrome DevTools → Performance, record the problem scenario and find long tasks and the LCP element.
4. After changes, run Lighthouse for quick feedback, but draw the final conclusion from field data after 2–4 weeks.
5. For your own monitoring, add the web-vitals library and send metrics to analytics:

import { onLCP, onINP, onCLS } from 'web-vitals';

function send(metric) {
  navigator.sendBeacon('/analytics/vitals', JSON.stringify({
    name: metric.name, value: metric.value, id: metric.id, page: location.pathname
  }));
}
onLCP(send); onINP(send); onCLS(send);

Important. Lighthouse doesn't measure INP directly because there are no real interactions in the lab. That's why "100 points" in Lighthouse can coexist with poor INP for real users.

09 Priorities: where to start

Don't try to fix everything at once. Work by business impact.

1. Pages that bring in money: the home page, ad landing pages, categories and product pages, service pages, cart and checkout.
2. The mobile version. Its share of traffic is usually the largest, and its metrics are worse.
3. LCP is often the quickest win (images, fonts, cache).
4. INP is medium difficulty and needs a developer and a script audit.
5. CLS is usually the easiest, solved with dimensions and reserved space.
6. Don't chase 100 points. The green zone in field data matters more than a perfect lab score.

10 Common agency mistakes

• A "before and after" report based only on Lighthouse. That's a lab. The client needs field data and a business result.
• Starting with CDN and hosting. Useful, but the key problem is most often extra scripts, heavy images and render-blocking CSS. Profile first, then infrastructure.
• Lazy-loading every image, including the hero. It hurts LCP.
• Endless optimization plugins. Several caching and minification plugins conflict and create new problems.
• Optimizing a single page. Google evaluates URL groups. Fix templates, not individual pages.
• Ignoring mobile. A test on a fast laptop with fiber says nothing about a user on the subway.
• One-off optimization. New widgets, banners and scripts spoil the metrics again. Monitoring is needed.

11 Optimization by platform

WordPress

• A lightweight or custom theme instead of a multipurpose one.
• One quality caching plugin, not three.
• Disable unused plugins, styles and scripts on pages where they're not needed.
• Convert images to WebP/AVIF, srcset out of the box; check that the hero doesn't get lazy-loaded.
• Fonts hosted locally only, without connecting to external domains.

MODX

• Use chunk and snippet caching (cacheable) and enable full resource cache.
• CSS/JS minification and bundling with proven extensions or at build level.
• Generate responsive images (pThumb or similar) in WebP/AVIF.
• Clean HTML without extra markup is a natural advantage for LCP.

Laravel / custom projects

• php artisan optimize, caching of config, routes and views; a current PHP version with OPcache.
• Query and response caching (Redis), eliminating N+1 with eager loading.
• For Vue/Nuxt front ends: SSR or SSG for content pages, bundle splitting, defineAsyncComponent for heavy components.
• Queues for heavy jobs so they don't block the response.

OpenCart and online stores

• Page cache and catalog optimization: filters and search are often the main source of poor INP.
• Limit the number of modules on the category page.
• Product image optimization: thumbnails at the right sizes, WebP, width/height.
• Deferred loading of review widgets, chats and counters.

12 Optimization checklist

LCP

• The LCP element is identified for every key template
• Hero image without loading="lazy", with fetchpriority="high"
• AVIF/WebP + srcset and sizes
• Critical CSS inline, the rest async
• Scripts with defer, no render-blocking JS in <head>
• WOFF2 fonts, font-display: swap, main font preloaded
• Preconnect to the CDN and other critical domains
• TTFB is healthy, page cache and CDN enabled

INP

• Third-party scripts audited, extras removed
• Chat, pixels and A/B load after interaction
• Long tasks broken up, instant visual feedback in place
• DOM without extra nodes, long lists virtualized

CLS

• All images and videos have dimensions or aspect-ratio
• Space reserved for banners, ads and widgets
• Fonts with a fallback and adjusted metrics
• Animations only on transform and opacity

Measurement

• Search Console and CrUX review set up
• Own data collected via web-vitals
• A re-check of field data scheduled in 2–4 weeks

13 How to measure results in business metrics

Technical scores are an intermediate result. What matters to the client is money.

Compare periods of the same length and seasonality. Record the metrics before changes and let data accumulate for at least 4 weeks after them.

A fast site is part of the sales funnel, not a technical fetish.

14 FAQ

What are Core Web Vitals in simple terms?

They're three indicators Google uses to assess how comfortable a page is to use: how quickly the main content appears (LCP), how quickly the page responds to actions (INP), and whether the layout jumps (CLS).

What are the Core Web Vitals thresholds in 2026?

LCP up to 2.5 seconds, INP up to 200 milliseconds, CLS up to 0.1. The score is calculated at the 75th percentile of real visits, separately for mobile and desktop.

Does site speed affect Google rankings?

Yes, as one of many signals. But relevance and content quality matter more. The most noticeable effect of speed is fewer bounces and more conversions, which indirectly helps SEO too.

Why is PageSpeed Insights green while Search Console shows problems?

The PageSpeed score is a Lighthouse lab test, while Search Console shows field data from real users. They can differ substantially, especially for INP and on weak mobile devices. Go by field data.

How soon do results show after optimization?

Lab improvements are visible immediately. Field data (CrUX) accumulates over 28 days, so evaluate the full picture in Search Console after 3–6 weeks.

Do I need to get 100 in Lighthouse?

No. The goal is the green zone in field Core Web Vitals on key pages and growth in business metrics. The last points from 90 to 100 often cost a lot and give almost no return.

What should I fix first: LCP, INP or CLS?

Start with the metric that's in the red zone on key pages. If problems are everywhere, LCP usually gives the fastest result, then CLS (simple fixes), then INP (needs a deeper JavaScript audit).

Do third-party scripts affect Core Web Vitals?

Yes, and strongly. Chats, pixels, heatmaps and A/B tools are most often the main cause of poor INP and late LCP. Defer their loading and remove unused ones.

Do I need to move to headless or a new framework for CWV?

Usually not. Most problems are solved by optimizing images, fonts, scripts and cache on the existing platform. An architecture change is justified when you're hitting the limits of the platform itself.

15 Summary

In 2026, Core Web Vitals are not magic and not a replacement for quality content, but a practical tool for two things: so a page doesn't push the user away, and so advertising and SEO traffic turn into leads.

The order of action:

1. Look at field data in Search Console and PageSpeed Insights.
2. Find the weak templates on pages that bring in money.
3. Fix LCP, then INP and CLS, starting with the mobile version.
4. Set up monitoring and check metrics after every release.
5. Judge the result by leads, not just by scores.

Need a speed audit of your website?

We'll check the field data, find the real causes of slow performance and build a fix plan ordered by impact on leads. No "magic" in the reports.

Order an audit at crope.pro